// 菜单的显示  隐藏
const navMenu = document.querySelector('#nav-menu')
const navToggle = document.querySelector('#nav-toggle')
const navClose = document.querySelector('#nav-close')

// nav-toggle存在
if (navToggle) {
  navToggle.addEventListener('click', () => {
    // 展示菜单
    navMenu.classList.add('show-menu')
  })
}
if (navClose) {
  navClose.addEventListener('click', () => {
    // 隐藏菜单
    navMenu.classList.remove('show-menu')
  })
}

// 移除菜单
const navLink = document.querySelectorAll('.nav-link')
function linkAction() {
  const navMenu = document.querySelector('#nav-menu')
  navMenu.classList.remove('show-menu')
}
navLink.forEach(link => link.addEventListener('click', linkAction))

// 改变头部背景颜色
function scrollHeader() {
  const header = document.getElementById('header')
  if (this.scrollY >= header.offsetHeight) {
    header.classList.add('bg-header')
  } else {
    header.classList.remove('bg-header')
  }
}
window.addEventListener('scroll', scrollHeader)

// 返回顶部
function scrollUp() {
  const scrollUp = document.getElementById('scroll-up')
  // 460自行设置
  if (this.scrollY >= 460) {
    scrollUp.classList.add('show-scroll')
  } else {
    scrollUp.classList.remove('show-scroll')
  }
}
window.addEventListener('scroll', scrollUp)

// 滚动 sections 链接高亮 属性选择器
const sections = document.querySelectorAll('section[id]')
function scrollActive() {
  // 只读属性
  const scrollY = window.pageYOffset
  sections.forEach(current => {
    const sectionHeight = current.offsetHeight
    const sectionTop = current.offsetTop - 60
    const sectionId = current.getAttribute('id')
    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
      document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link')
    } else {
      document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link')
    }
  })
}
window.addEventListener('scroll', scrollActive)

/*========== 主题切换 ==========*/
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'ri-sun-line'
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')
// 初始页面
if (selectedTheme) {
  // dark时, 主题为暗黑
  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
  // ri-moon-line 时  添加ri-sun-line
  themeButton.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme)
}

const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
// 取相反图标
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'ri-moon-line' : 'ri-sun-line'
themeButton.addEventListener('click', () => {
  document.body.classList.toggle(darkTheme)
  themeButton.classList.toggle(iconTheme)
  localStorage.setItem('selected-theme', getCurrentTheme())
  localStorage.setItem('selected-icon', getCurrentIcon())
})

/* ======= 滚动动画 ======== */
const sr = ScrollReveal({
  origin: "top",
  distance: "60px",
  duration: 2500,
  delay: 400,
  reset: true, // 动画重复
})

sr.reveal(`.home-img`)
sr.reveal(`.home-data`, { origin: "bottom" })
sr.reveal(`.about-data, .recently-data`, { origin: "left" })
sr.reveal(`.about-img, .recently-img`, { origin: "right" })
sr.reveal(`.popular-card`, { interval: 100 })
sr.reveal(`.newsletter-container`, { interval: 100 })
sr.reveal(`.footer-container, .footer-content div`, { interval: 100 })
sr.reveal(`.footer-info`)
